<template>
    <van-nav-bar title="聊天室（司机）" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="chat-container">
      <!-- 消息栏 -->
      <div class="message-list">
        <div v-for="(message, index) in messages" :key="index" class="message-item">
          <div :class="['message-content', message.isSelf? 'self-message' : 'other-message']">
            {{ message.mes }}
          </div>
        </div>
      </div>
      <!-- 输入栏 -->
      <div class="input-container">
        <input v-model="inputMessage" placeholder="输入消息" />
        <button @click="sendMessage">发送</button>
      </div>
      <!-- 底部栏 -->
      <div class="footer">
        <!-- 这里可以添加底部栏的功能，例如表情、附件等 -->
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  const onClickLeft = () => router.go(-1);
  const userid = 1001;
  
  // 存储消息列表，每个消息是一个对象，包含文本和是否为自己发送的标志
  const messages = ref([]);
  // 输入框中的消息
  const inputMessage = ref('');
  // WebSocket 连接对象
  const socket = ref(null);
  
  // 组件挂载时建立 WebSocket 连接
  onMounted(() => {
    const room = userid; // 假设这是从路由参数或其他地方获取的房间 ID
    socket.value = new WebSocket("ws://localhost:8000/room/"+room+"/");
    socket.value.onopen = () => {
      console.log('连接成功');
    }
    socket.value.onmessage = (event) => {
      const message = JSON.parse(event.data);
      messages.value.push(message);
      console.log('收到消息:', message);
    };
    // socket.value.onerror = (error) => {
    //   console.error('WebSocket error:', error);
    // };
    // socket.value.onclose = () => {
    //   console.log('WebSocket connection closed');
    // };
  });
  
  // 组件卸载时关闭 WebSocket 连接
  onUnmounted(() => {
    if (socket.value) {
      socket.value.close();
    }
  });
  
  // 发送消息的方法
  const sendMessage = () => {
    if (socket.value && inputMessage.value) {
      const message = {
        mes: inputMessage.value,
        // 添加 'to' 键，根据你的业务逻辑确定其值，这里假设接收方是司机的 ID，例如 1001
        to: 'user' + userid 
      };
      messages.value.push(message);
      socket.value.send(JSON.stringify(message));
      inputMessage.value = '';
    }
  };
  </script>
  
  <style scoped>
 .chat-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
  }
 .message-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
  }
 .message-item {
    margin-bottom: 10px;
  }
 .message-content {
    padding: 10px;
    border-radius: 10px;
    max-width: 70%;
  }
 .self-message {
    background-color: #dcf8c6;
    align-self: flex-end;
  }
 .other-message {
    background-color: #fff;
    align-self: flex-start;
  }
 .input-container {
    display: flex;
    margin-top: 10px;
  }
 .input-container input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
  }
 .input-container button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
  }
 .footer {
    margin-top: 10px;
    text-align: center;
    /* 可以添加更多的样式，比如添加表情和附件按钮 */
  }
  </style>